<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>上传组件 upload - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>上传组件</h1>
<blockquote class="layui-elem-quote">
<p>上传组件 <code>upload</code> 是用于处理文件上传的前端交互逻辑，可以更好地协助后端实现文件从本地到服务端上传的对接。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{hot: true, anchor: null}" style="margin-bottom: 0;">示例</h2>
<p>以下示例的部分上传接口由第三方网站 <code>https://httpbin.org</code> 提供，它可以模拟各类 HTTP 请求。若未配置上传接口的，每次上传都会报「请求上传接口出现异常」的提示，这属于正常现象。</p>
<div>
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">图片上传</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '图片上传'}, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render();
}}">
  <textarea>
<button type="button" class="layui-btn" id="ID-upload-demo-btn">
  <i class="layui-icon layui-icon-upload"></i> 单图片上传
</button>
<div style="width: 132px;">
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
    <div id="ID-upload-demo-text"></div>
  </div>
  <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
    <div class="layui-progress-bar" lay-percent=""></div>
  </div>
</div>
<hr style="margin: 21px 0;">
<div class="layui-upload">
  <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
    <i class="layui-icon layui-icon-upload"></i> 多图片上传
  </button> 
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
    预览图：
    <div class="layui-upload-list" id="upload-demo-preview"></div>
 </blockquote>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  var element = layui.element;
  var $ = layui.$;
  // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
      });
      
      element.progress('filter-demo', '0%'); // 进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){
      // 若上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      // 上传成功的一些操作
      // …
      $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
    },
    error: function(){
      // 演示失败状态，并实现重传
      var demoText = $('#ID-upload-demo-text');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    },
    // 进度条
    progress: function(n, elem, e){
      element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
  // 多图片上传
  upload.render({
    elem: '#ID-upload-demo-btn-2',
    url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    multiple: true,
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#upload-demo-preview').append('<img src="https://layui.dev/docs/2.8/upload/'+&#32;result&#32;+'" alt="'+ file.name +'" style="width: 90px; height: 90px;">')
      });
    },
    done: function(res){
      // 上传完毕
      // …
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-files-table" lay-toc="{level: 2}">制作多文件上传表格</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button> 
  <div class="layui-upload-list">
    <table class="layui-table">
      <colgroup>
        <col style="min-width: 100px;">
        <col width="150">
        <col width="260">
        <col width="150">
      </colgroup>
      <thead>
        <th>文件名</th>
        <th>大小</th>
        <th>上传进度</th>
        <th>操作</th>
      </thead>
      <tbody id="ID-upload-demo-files-list"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var element = layui.element;
  var $ = layui.$;
  // 制作多文件上传表格
  var uploadListIns = upload.render({
    elem: '#ID-upload-demo-files',
    elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
    url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    accept: 'file',
    multiple: true,
    number: 3,
    auto: false,
    bindAction: '#ID-upload-demo-files-action',
    choose: function(obj){   
      var that = this;
      var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
      // 读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">',
          '<td>'+ file.name +'</td>',
          '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
          '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
          '<td>',
            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
          '</td>',
        '</tr>'].join(''));
        
        // 单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        // 删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; // 删除对应的文件
          tr.remove(); // 删除表格行
          // 清空 input file 值，以免删除后出现同名文件不可选
          uploadListIns.config.elem.next()[0].value = ''; 
        });
        
        that.elemList.append(tr);
        element.render('progress'); // 渲染新加的进度条组件
      });
    },
    done: function(res, index, upload){ // 成功的回调
      var that = this;
      // if(res.code == 0){ // 上传成功
        var tr = that.elemList.find('tr#upload-'+ index)
        var tds = tr.children();
        tds.eq(3).html(''); // 清空操作
        delete this.files[index]; // 删除文件队列已经上传成功的文件
        return;
      //}
      this.error(index, upload);
    },
    allDone: function(obj){ // 多文件上传完毕后的状态回调
      console.log(obj)
    },
    error: function(index, upload){ // 错误回调
      var that = this;
      var tr = that.elemList.find('tr#upload-'+ index);
      var tds = tr.children();
       // 显示重传
      tds.eq(3).find('.demo-reload').removeClass('layui-hide');
    },
    progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
      element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-accept" lay-toc="{level: 2}">过滤文件类型</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'file'}">
    <i class="layui-icon layui-icon-upload"></i> 
    上传文件
  </button>
  <button type="button" class="layui-btn demo-class-accept" lay-options="{
    accept: 'file',
    exts: 'zip|rar|7z'
  }">
    <i class="layui-icon layui-icon-upload"></i> 
    只允许压缩文件
  </button>
  <button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'video'}">
    <i class="layui-icon layui-icon-upload"></i> 
    上传视频
  </button>
  <button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'audio'}">
    <i class="layui-icon layui-icon-upload"></i>
    上传音频
  </button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  // 渲染
  upload.render({
    elem: '.demo-class-accept', // 绑定多个元素
    url: '', // 此处配置你自己的上传接口即可
    accept: 'file', // 普通文件
    done: function(res){
      layer.msg('上传成功');
      console.log(res);
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-size" lay-toc="{level: 2}">限制文件大小</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<button type="button" class="layui-btn layui-btn-danger" id="ID-upload-demo-size">
  <i class="layui-icon layui-icon-upload"></i> 上传图片
</button>
<div class="layui-inline layui-word-aux">
  这里以限制 60KB 为例
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-size',
    url: '', // 此处配置你自己的上传接口即可
    size: 60, // 限制文件大小，单位 KB
    done: function(res){
      layer.msg('上传成功');
      console.log(res);
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-auto" lay-toc="{level: 2}">选择后手动上传</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-choose">选择文件</button>
  <button type="button" class="layui-btn" id="ID-upload-demo-action">开始上传</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-choose',
    url: '', // 此处配置你自己的上传接口即可
    auto: false,
    // multiple: true,
    bindAction: '#ID-upload-demo-action',
    done: function(res){
      layer.msg('上传成功');
      console.log(res)
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-drag" lay-toc="{level: 2}">拖拽上传</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
  <i class="layui-icon layui-icon-upload"></i> 
  <div>点击上传，或将文件拖拽到此处</div>
  <div class="layui-hide" id="ID-upload-demo-preview">
    <hr> <img src="index.html" alt="上传成功后渲染" style="max-width: 100%">
  </div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var $ = layui.$;
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-drag',
    url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    done: function(res){
      layer.msg('上传成功');
      $('#ID-upload-demo-preview').removeClass('layui-hide')
      .find('img').attr('src', res.files.file);
      console.log(res)
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-form-file" lay-toc="{level: 2}">绑定原始文件域</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<input type="file" name="file" id="ID-upload-demo-form-files">
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-form-files',
    url: '', // 此处配置你自己的上传接口即可
    done: function(res){
      layer.msg('上传成功');
      console.log(res)
    }
  });
});
</script>
  </textarea>
</pre>
</div>
<p></p>
<h2 id="api" lay-toc="{hot: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var upload = layui.upload</td>
<td>获得 <code>upload</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">var inst = upload.render(options)</a></td>
<td>upload 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#upload">inst.upload()</a></td>
<td>对当前实例提交上传</td>
</tr>
<tr>
<td><a href="index.html#reload">inst.reload(options)</a></td>
<td>对当前实例进行重载</td>
</tr>
<tr>
<td>inst.config</td>
<td>获得当前实例的属性配置项</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="render" lay-toc="{level: 2, hot: true}">渲染</h3>
<p><code>upload.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a>
<br>注 : 除 <code>elem</code> 属性外，其他基础属性也可以直接写在元素的 <code>lay-options=&quot;{}&quot;</code> 属性中。</li>
</ul>
<pre><code class="layui-code">&lt;button type=&quot;button&quot; class=&quot;layui-btn&quot; id=&quot;ID-test-uoload&quot;&gt;上传&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;layui-btn test-class-upload&quot; lay-options=&quot;{}&quot;&gt;上传&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;layui-btn test-class-upload&quot; lay-options=&quot;{}&quot;&gt;上传&lt;/button&gt;
  
&lt;!-- import layui --&gt;
&lt;script&gt;
layui.use(function(){
  var upload = layui.upload;
  // 单个渲染
  upload.render({
    elem: '#ID-test-uoload',
    // …
  });
  // 批量渲染
  upload.render({
    elem: '.test-class-upload',
    // …
  });
});
&lt;/script&gt;
</code></pre>
<p>该方法返回一个实例对象，包含操作当前实例的相关方法成员。</p>
<pre><code class="layui-code">var inst = upload.render(options);
console.log(inst); // 得到当前实例对象
</code></pre>
<h3 id="upload" lay-toc="{level: 2}">提交上传</h3>
<p><code>inst.upload();</code></p>
<ul>
<li>无需传递参数</li>
</ul>
<p>文件在进行选择后，会自动提交上传。而若文件<em class="layui-text-em">上传失败</em>，则可以使用该方法来重新上传，</p>
<pre><code class="layui-code">// 渲染
var inst = upload.render({
  elem: '#id',
  error: function(){ // 上传失败的回调
    // 当上传失败时，可在此处生成「重新上传」按钮，并执行该方法重新触发上传提交
    /*
    $('#btn').on('click', function(){
      inst.upload();
    })
    */
  }
  // …
}); 
</code></pre>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
<p><code>inst.reload(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法用于对当前的上传实例进行完整重载，所有属性均可参与到重载中。</p>
<pre><code class="layui-code">// 渲染
var inst = upload.render({
  elem: '#id',
  // …
});
 
// 重载
inst.reload({
  field: 'AAA',
  // …
})
</code></pre>
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>elem</td>
<td>
<p>绑定元素选择器或 DOM 对象</p>
</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>url</td>
<td>
<p>上传接口</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>field</td>
<td>
<p>文件域的字段名</p>
</td>
<td>string</td>
<td>
<p><code>file</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.data">data</a></p>
</td>
<td>
<div id="options.data" lay-pid="options" class="ws-anchor">  
传递给上传接口的额外参数，支持静态赋值和动态赋值两种写法。
</div>
<ul>
<li>静态赋值 :</li>
</ul>
<pre><code class="layui-code">data: {
  id: '123'
}
</code></pre>
<ul>
<li>动态赋值 :</li>
</ul>
<pre><code class="layui-code">data: {
  id: function(){
    return $('#id').val();
  }
}
</code></pre>
</td>
<td>object</td>
<td>-</td>
    </tr>
    <tr>
<td>headers</td>
<td>
<p>上传接口的请求头。如 <code>headers: {token: 'abc123'}</code></p>
</td>
<td>object</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.accept">accept</a></p>
</td>
<td>
<div id="options.accept" lay-pid="options" class="ws-anchor">
指定允许上传时校验的文件类型。可选值有：
</div>  
<ul>
<li><code>images</code> 图片类型</li>
<li><code>file</code> 所有文件类型</li>
<li><code>video</code> 视频类型</li>
<li><code>audio</code> 音频类型</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>images</code></p>
</td>
    </tr>
    <tr>
<td>acceptMime</td>
<td>
<p>规定打开系统的文件选择框时，筛选出的文件类型，多个 <code>MIME</code> 类型可用逗号隔开。示例：</p>
<pre><code class="layui-code">acceptMime: 'image/*'` // 筛选所有图片类型
acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
</code></pre>
<p>更多可选值参考: <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types" target="_blank">MIME 类型</a></p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.exts">exts</a></p>
</td>
<td>
<div id="options.exts" lay-pid="options" class="ws-anchor">
<p>允许上传的文件后缀。一般结合 <code>accept</code> 属性来设定。</p>
</div>  
<ul>
<li>假设 <code>accept: 'file'</code> 类型时，那么设置 <code>exts: 'zip|rar|7z'</code> 即代表只允许上传压缩格式的文件。</li>
<li>默认为常见图片后缀，即 <code>jpg|png|gif|bmp|jpeg|svg</code></li>
</ul>
</td>
<td>string</td>
<td>
<p>见左</p>
</td>
    </tr>
    <tr>
<td>auto</td>
<td>
<p>是否选完文件后自动上传。若为 <code>false</code>，则需设置 <code>bindAction</code> 属性来指向其它按钮提交上传。参考：<a href="index.html#demo-auto">#示例</a></p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>bindAction</td>
<td>
<p>设置触发上传的元素选择器或 DOM 对象。
<br>一般配合 <code>auto: false</code> 来使用。详细用法参考：<a href="index.html#demo-auto">#示例</a></p>
</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>force <sup>2.6.9+</sup></td>
<td>
<p>规定强制返回的数据格式。</p>
<ul>
<li>若值为 <code>'json'</code>，则强制校验 JSON 数据格式</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>null</code></p>
</td>
    </tr>
    <tr>
<td>size</td>
<td>
<p>设置文件最大可允许上传的大小，单位 <code>KB</code> 。默认不限制。
<br>不支持 <code>ie8/9</code></p>
</td>
<td>number</td>
<td>
<p><code>0</code></p>
</td>
    </tr>
    <tr>
<td>multiple</td>
<td>
<p>是否允许多文件上传。不支持 <code>ie8/9</code></p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>number</td>
<td>
<p>同时可上传的文件数量，一般当 <code>multiple: true</code> 时使用。</p>
</td>
<td>number</td>
<td>-</td>
    </tr>
    <tr>
<td>drag</td>
<td>
<p>是否接受拖拽的文件上传。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td colspan="4" style="text-align: center"> 
<div id="options.callback" lay-pid="options" class="ws-anchor">
<p><a href="index.html#options.callback">回调函数</a></p>
</div>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.choose">choose</a></p>
</td>
<td colspan="3">
<div id="options.choose" lay-pid="options" class="ws-anchor">
选择文件后的回调函数。返回的参数如下
</div>
<pre><code class="layui-code">choose: function(obj){
  // 将每次选择的文件追加到文件队列
  var files = obj.pushFile();
  
  // 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
  obj.preview(function(index, file, result){
    console.log(index); // 得到文件索引
    console.log(file); // 得到文件对象
    console.log(result); // 得到文件base64编码，比如图片
    
    // obj.resetFile(index, file, '123.jpg'); // 重命名文件名
    
    // 这里还可以做一些 append 文件列表 DOM 的操作
    
    // obj.upload(index, file); // 对上传失败的单个文件重新上传，一般在某个事件中使用
    // delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
  });
}
</code></pre>
<p>详细用法参考：<a href="index.html#demo-files-table">#示例</a></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.before">before</a></p>
</td>
<td colspan="3">
<div id="options.before" lay-pid="options" class="ws-anchor">
文件提交上传前的回调函数。返回的参数同 choose
</div>
<pre><code class="layui-code">before: function(obj){ // obj 参数同 choose
  layer.load(); // 上传 loading
  
  // 若返回 false，则表明阻止上传
  /*
  if(true){
    return false;
  }
  */
}
</code></pre>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.progress">progress</a></p>
</td>
<td colspan="3">
<div id="options.progress" lay-pid="options" class="ws-anchor">
执行上传请求后的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">progress: function(n, elem, res, index){
  var percent = n + '%' // 获取进度百分比
  element.progress('demo', percent); // 可配合 layui 进度条元素使用
  
  // 得到当前触发的元素 DOM 对象
  console.log(elem); // 可通过该元素定义的属性值匹配到对应的进度条。
  console.log(res); // 得到 progress 响应信息
  
  console.log(index); // 得到当前上传文件的索引，多文件上传时的进度条控制
  element.progress('demo-'+ index, n + '%'); // 进度条
}
</code></pre>
<p>详细用法参考：<a href="index.html#examples">#示例</a></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.done">done</a></p>
</td>
<td colspan="3">
<div id="options.done" lay-pid="options" class="ws-anchor">
执行单次文件上传请求后的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">done: function(res, index, upload){
  // 假设 `code: 0` 代表上传成功
  if(res.code == 0){
    // do something // 比如将 res 返回的图片链接保存到隐藏域
  }
  
  // 获取当前触发上传的元素，一般用于 elem 绑定 class 的情况
  var item = this.item;
  
  // …
}
</code></pre>
<p>详细用法参考：<a href="index.html#examples">#示例</a></p>
</td>
    </tr>
    <tr>
    <tr>
<td>
<p><a href="index.html#options.allDone">allDone</a></p>
</td>
<td colspan="3">
<div id="options.allDone" lay-pid="options" class="ws-anchor">
<p>当开启多文件 (<code>multiple: true</code> ) 且所有文件均上传完毕后的状态回调函数。</p>
</div>
<pre><code class="layui-code">allDone: function(obj){
  console.log(obj.total); // 上传的文件总数
  console.log(obj.successful); // 上传成功的文件数
  console.log(obj.failed); // 上传失败的文件数
}
</code></pre>
</td>
    </tr>
    <tr>
<td>error</td>
<td colspan="3">
<p>执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数如下：</p>
<pre><code class="layui-code">error: function(index, upload){
  console.log(index); // 当前文件的索引
  // upload(); 重新上传的方法
}
</code></pre>
</td>
    </tr>
  </tbody>
</table>
</div>
<h2 id="cors-upload" lay-toc="{}">跨域方案</h2>
<p><code>upload</code> 组件支持跨域上传，一般有以下两种场景</p>
<ul>
<li>
<p>自建上传服务。在服务端配置 <code>CORS</code> 开启跨资源共享。 即对接口所在的服务器设置 <code>Access-Control-Allow-Origin </code> 相关 <code>header</code> 信息。</p>
</li>
<li>
<p>第三方上传服务。如：阿里云、腾讯云等，只需按照不同平台对应的上传 SDK 进行操作即可。</p>
</li>
</ul>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/upload/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>